<script setup lang="ts">
// page 当前页
// pages 总页数
// maxVisiblePages 页面中同时最多显示的页码数量
const props = withDefaults(
  defineProps<{ page: number; pages: number; maxVisiblePageNum?: number }>(),
  { maxVisiblePageNum: 5 }
);
//声明当前组件要触发的自定义组件
const emit = defineEmits<{ (e: "update:page"): void }>();
//当前页（双向数据绑定）
const page = useVModel(props, "page", emit);

const pageInfo = computed(() => {
  //计算页码的偏移量，偏移量是指当前页的两边有多少页码
  const pageOffset = Math.floor(props.maxVisiblePageNum / 2);
  //计算显示着的开始页码：当前页-偏移量
  let start = page.value - pageOffset;
  //计算显示着的结束页码：显示着的开始页码+页面中同时显示着的最多页码-1
  let end = start + props.maxVisiblePageNum - 1;
  //限制显示着的开始页码的范围
  if (start < 1) {
    start = 1;
    //重新计算显示着的结束页码
    let end_tmp = start + props.maxVisiblePageNum - 1;
    //判断重新计算的显示着的结束页码是否大于总页数，如果大于总页数让它等于总页数，否则让它等于重新计算的结束页码
    end = end_tmp > props.pages ? props.pages : end_tmp;
  }
  //限制显示着的结束页码的范围
  if (end > props.pages) {
    //重置显示着的结束页码
    end = props.pages;
    //重新计算显示着的结束页码
    let start_tmp = end - props.maxVisiblePageNum + 1;

    start = start_tmp < 1 ? 1 : start_tmp;
  }
  //生成页码数组
  let pagesArray = [];
  // 遍历生成页码值
  for (let i = start; i <= end; i++) {
    // 存储页码值
    pagesArray.push(i);
  }
  return { start, end, pagesArray };
});
</script>
<template>
  <div class="xtx-pagination">
    <a href="javascript:" v-if="page > 1" @click="page--">上一页</a>
    <span v-if="pageInfo.start > 1">...</span>
    <a
      href="javascript:"
      v-for="item in pageInfo.pagesArray"
      :key="item"
      :class="{ active: item === page }"
      @click="page = item"
      >{{ item }}</a
    >
    <span v-if="pageInfo.end < pages">...</span>
    <a href="javascript:" v-if="page < pages" @click="page++">下一页</a>
  </div>
</template>

<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
